<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>库存首页</title>
  <!--    <link rel="stylesheet" href="css/main.css">-->
  <link th:href="@{ /css/bootstrap-4.6.2-dist/css/bootstrap.min.css}" rel="stylesheet">
  <!--    <link rel="stylesheet" href="../static/css/bootstrap-4.6.2-dist/css/bootstrap.min.css">-->
</head>
<body>
<div class="container">
  <div class="row text-center bg-dark text-light">
    <div class="col-2">
      <img src="/img/market.jpg" alt="Market Image" width="100%">
    </div>
    <div class="col-7">
      <h2>欢迎使用超市管理系统</h2>
    </div>
    <div class="col-2 user-info">
      <span>当前用户:</span>
      <span th:text="${username}"></span>
      <span><a href="/logout">退出</a></span>
    </div>
  </div>
  <div class="row" style="min-height: 400px;">
    <div class="col-2 bg-dark text-light">
      <li>
        <a href="/main"> 管理系统首页</a>
      </li>
      <li>
        <a href="/api/goods"> 商品首页</a>
      </li>
      <li>
        <a href="/suppliers/suppliersList"> 管理供应商模块</a>
      </li>
      <li>
        <a href="/inventory/inventoryList"> 管理库存模块</a>
      </li>
    </div>

    <div class="col-10 pt-2">
      <div class="row text-center">
        <div class="col-9"></div>
        <div class="col-3">
          <a href="/inventory/inventoryAdd" class="btn-warning">新增</a>
        </div>

      </div>

      <p>目前现有库存列表</p >
      <!--                    <p th:text="${data}"></p >-->
      <table class="table table-bordered">
        <thead>
        <th>序号</th>
        <th>库存名</th>
        <th>数量</th>
<!--        <th>联系方式</th>-->
        <!--                        <th>供应商</th>-->
<!--        <th>管理</th>-->
        </thead>
        <tbody>
        <tr th:each="inventory:${data}">
          <td th:text="${inventory.getId()}"></td>
          <td th:text="${inventory.getName()}"></td>
          <td th:text="${inventory.getQuantity()}"></td>
<!--          <td th:text="${suppliers.getPhone()}"></td>-->
          <!--                            <td th:text="${goods.supplier}"></td>-->
          <td>
            <button class="btn btn-danger" th:onclick="del([[${inventory.getId()}]])">删除</button>
            <button class="btn btn-info" th:onclick="update([[${inventory.getId()}]])">更新</button>

          </td>
          <!--                        </tr>-->
          <!--                        </tbody>-->
      </table>
    </div>
  </div>
  <!--    <div class="row text-center bg-black">-->
  <!--        @2023-2025 版权所有，违法必究-->
  <div class="row text-center bg-black footer">
    @2023-2025 版权所有，违法必究
  </div>
</div>
<!--</div>-->

<!--</div>-->
<!--<p>这是系统管理首页，欢迎登录</p >-->
<!--<tr th:each="user:${data}">-->
<!--    <td th:text="${user.name}"></td>-->
<!--    <td th:text="${user.password}"></td>-->
<!--</tr>-->
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
  function del(id){
    var flag = confirm("是否删除这个记录？");
    if (flag == true){
      //     jquery的post方法ajax方法
      $.post("/api/inventoryDelete",{"id":id},function(res){
        console.log(res)
        if (res==1){
          alert("删除成功");
          location.reload();
        }else {
          alert("删除失败");
        }
      })
    }

  }
  function update(id){
    var flag = confirm("是否更新这个记录？");
    if(flag==true){
      location.href="/inventory/inventoryUpdate?id="+id;
    }
  }
</script>